<template>
    <view class="page">
        <aliyun-captcha id="captcha-element" v-if="loadCaptcha" :props="pluginProps" />
        <button @click="showPop">点我</button>
    </view>
</template>
<script >
const app = getApp();
var AliyunCaptchaPluginInterface = requirePlugin('AliyunCaptcha');
var captchaVerifyCallback = async(captchaVerifyParam) =>{
    console.log(captchaVerifyParam)
    /****
     * 接口验证
     */
    // 验证成功后，返回验证结果，用于后台验证
    return{
        captchaResult:true
    }
}
var onBizResultCallback = async(data) =>{
    console.log(data)
}
export default {
    data(){
        return{
            pluginProps:{},
            loadCaptcha:false,
        }
    },
    onLoad() {
        const that = this
        this.pluginProps = {
            SceneId: app.globalData.appConfig && app.globalData.appConfig.cfg_aliyun_captcha_wxmini || '17yuvf1f',
            mode: "popup",
            captchaVerifyCallback: captchaVerifyCallback.bind(that), // 固定写法，需要绑定this
            onBizResultCallback: onBizResultCallback.bind(that), // 固定写法，需要绑定this
            slideStyle: {
                width: 540, // 宽度默认为540rpx
                height: 60, // 高度默认为60rpx
            },
            language: "cn",
            region: "cn",
        }
        this.loadCaptcha = true
    },
    methods:{
        showPop(){
            AliyunCaptchaPluginInterface.show()
        },
        
    },
    
}
</script>